<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
    <script>
        		//then方法
		//then方法的第一个参数是resolve回调函数(成功返回的数据),reject是第二个
//		参数(可选),失败的状态.
//		then()返回一个新的promise实例,可以采用链式编程(想想JQ方法)
//      resolve() reject()  all()  race()  done() finally()
		
		// 1.resolve()可以把任何的对象转化成promise对象

        // const pm = Promise.resolve("哈哈")
        // let pm = new Promise(resolve=>resolve("foo"));
        // const pm = Promise.reject("失败")

        // pm.then(data=>{
        //     console.log(data);
        // })
        // console.log(pm);

        	// 2.reject() 和 resolve()相似
		// let  pe = Promise.reject("失败了");
		// pe.then(null,(err)=>{
		// 	console.log(err)
		// })
        // pe.catch(err=>{
        //     console.log(err);
        // })

        		
		// 3.all()可能在做一些游戏类加载资源使用异步操作
		// 哈哈，看一下伪代码吧，脑补一下场景
		// let promise1 = new Promise((resolve,reject)=>{ })//比如加载图片
		// let promise2 = new Promise((resolve,reject)=>{ })//比如加载静态资源
		// let promise3 = new Promise((resolve,reject)=>{ })//比如加载flash的
			
		// let p4 = Promise.all([promise1,promise2,promise3]); 
		// p4.then(()=>{
		// 	//三个都成功   才成功
		// }).catch(err=>{
		// 	//如果有一个失败就失败了
		// })

        		// 4 race() 表示某个异步请求设置超时时间，并且在超时后执行相应的操作
		// 1 请求图片资源
			function requestImg(imgSrc){
				return new Promise((resolve,reject)=>{
					const img = new Image();
					img.onload = function(){
						resolve(img)
					}
					img.src = imgSrc;
				})
			}

			function timeout(){
				return new Promise((resolve,reject)=>{
					setTimeout(()=>{
						// reject("图片请求失败")
						reject(new Error("图片请求失败"))
					},3000)
				})
			}

            const  pm = Promise.race([requestImg("img/2.jpg"),timeout()]);

            pm.then(res=>{
                console.log(res);
                document.body.appendChild(res);
            }).catch(err=>{
                console.log(err);
            })

        // 5. done() finally()在最后面写目前用的比较少，服务端会用到，先不说了

			
    </script>

</html>